用了这个 IDE 插件，5分钟解决前后端联调！
点击上方蓝色“程序猿DD”，选择“设为星标”
回复“资源”获取独家整理的学习资料！
作者 | 李海庆
我是一个 Web 开发前端工程师，受到疫情影响，今天是我在家办公的第78天。开发了两周，今天就要开始前后端联调了。由于是远程办公，前后端联调没有在公司那么方便……
我遇到了这样 1 个问题
我们项目组的研发配比是一个前端对多个后端，后端并发开发，到跟前端联调的时候转为并行，几个后端同学都针对自己的服务都做了一个不同的服务部署，因为还没有到大家把代码最终合并，并且放到一个服务地址让前端联调的阶段，作为前端的我只能疯狂的、不停的切换代理……
2 个不太满意的解决方案
方法 1:
利用现有的代理工具，比如 Charles，PostMan。chrome插件SwitchyOmega等，PostMan,SwitchyOmega更适合后端模拟发起请求测试自己的接口， Charles 比较全面，可以用来抓包，也可以用来做代理调试，但是配置起来相对复杂。或者熟悉 nginx 的同学可以用nginx做代理实现，但对于新手而言以上这些方式实现可调通代理的成本还是太高了。
方法 2 ：
设定多个代理配置，对应不同开发环境的时候进行切换，不过需要重新启动项目，还得自己写逻辑判断具体环境的差别。
这两个方法，对于我来说并不是最优解。如果在这种频繁出现的问题上，用那么多的时间进行代理配置，那真的绝望……
5分钟解决问题
我请教了一个阿里的前端大神，他推荐了 VScode 上的 Cloud Toolkit 插件（在 Marketplace 上直接搜索安装），Alibaba Cloud Toolkit 有一个 HTTP Proxy 代理功能，可以提供的以 HTTP 协议为主且在本地启动的正向代理服务器，帮助完成业务请求的代理转发。
常见的使用场景包括：
隔离代码与环境，简化业务调试。Alibaba Cloud Toolkit 的 HTTP Proxy功能无需修改代码，便可将业务代码与环境隔离，将复杂的业务调试请求简化管理，大幅度提高了测试效率。
一键切换不同代理配置 。在测试环境的代码中通常会添加通过代理进行请求转发的配置，但在产品发布时需要删除该配置，甚至涉及多套测试环境，致使本地测试再次启用比较繁琐。Alibaba Cloud Toolkit的HTTP Proxy功能支持保存历史的HTTP Proxy配置，即开即用，大幅度提升了测试环境复用率，降低资源成本。
接入简洁，无需安装Nginx和Charles等代理工具，只需在Visual Studio Code中搜索Alibaba Cloud Toolkit插件并嵌入，就可实现前后端联调。
官网地址：https://cn.aliyun.com/product/cloudtoolkit
操作步骤
在Visual Studio Code左侧菜单栏中单击Alibaba Cloud Toolkit入口图标并展开TOOLKIT > HTTP Proxy。
在HTTP Proxy View页签单击Add Proxy。 在Add Proxy页面配置。 在Add Proxy页签通用配置。 Name：HTTP Proxy配置的名称，例如：ACT系统测试。 Target Server：需要代理的目标服务器，例如：http://aliyun.com 说明 支持HTTP和HTTPS两种网络协议。 （可选）Header：添加的HTTP或者HTTPS协议的头部内容。 （可选）Parameter：添加的请求参数内容，回车即可换行。 （可选）Cookie：添加Cookie内容。 在Advanced进行监听端口、跳转机和跨域访问等高级配置。 监听端口：本地代理的访问端口，即代码访问的本地代理的端口；默认端口为18002，如果出现端口冲突，那么请修改此参数。 （可选Agent Server：Agent服务器的IP地址。如果目标服务器必须通过域名访问，且每次需要修改Hosts文件，那么该设置项为域名所对应的IP地址。 （可选）Access-Control-Allow-Origin：跨域访问开关，默认开启。当请求需要进行跨域转发时，可开启该开关。 单击OK 在HTTP Proxy View页签中的代理列表中，单击Actions列的开关开启代理功能。
HTTP Proxy配置启动后，可以单击Copy便捷的获取代理地址，进而进行访问。
说明 如果不需要使用该代理配置时，关闭HTTP Proxy开关，再次使用时开启开关就行了。
补充信息
如果需要修改HTTP Proxy的配置信息，在HTTP Proxy View页面单击代理列表的Actions列中的Properties，并依据界面提示进行修改。
如果需要删除创建的HTTP Proxy，在HTTP Proxy View页面单击代理列表的Actions列中的Remove。
一键部署插件 Cloud Toolkit
大家可以在各个IDE（IntelliJ，Goland，PyCharm，Eclipse，Visual Studio Code）搜索“Alibaba Cloud Toolkit”，即可安装。
相比传统的开发和部署模式，Cloud Toolkit 的所有能力均采用了嵌入到本地IDE的创新方式，这样能够最大限度的减少开发者在不同工具间切换的成本。在开发和部署这个环节上，Cloud Toolkit能够将原本每次7-8分钟的繁琐工作，大大缩短到20秒内，开发者可以非常方便的在IDE内，一键完成应用程序的部署工作。关于传统方案和Cloud Toolkit方案的对比，如下图所示：
此外，Cloud Toolkit还提供了大量云原生开发过程中的提效工具，还包括一些常用的功能，比如：
本地 IDE 内项目一键部署到任意远程服务器
本地 IDE 内项目一键部署到任意Kubernetes
本地 IDE 内项目一键打包并推送Docker镜像到阿里云镜像仓库
本地 IDE 内项目一键部署到阿里云ECS、EDAS、SAE 、Web+、小程序云和ACK
内置 Terminal 终端
文件上传器
查看远程服务器运行时日志
阿里云小程序开发工具
阿里云函数计算开发工具
内置 SQL 执行器
Apache Dubbo 和 Spring Cloud 框架项目模板&代码生成
远程 Java 程序运行时诊断工具
微服务远程调试
接下来，将从 “本地 IDE 内项目一键部署到任意远程服务器”为例，展开来介绍 Cloud Toolkit 如何通过创新的方法帮助开发者提升效率。
第一步：添加服务器
如上图所示，在菜单
Tools - Alibaba Cloud - Alibaba Cloud View - Host中打开机器视图界面，如下图：
点击右上角Add Host按钮，出现添加机器界面
第二步：开始部署
在 IntelliJ IDEA 中，鼠标右键项目工程名，在出现的菜单中点击Alibaba Cloud - Deploy to Host...之后，会出现如下所示部署窗口：
在 Deploy to Host 对话框设置部署参数，然后单击 Deploy，即可执行初次部署。
注：部署参数说明 File：部署文件的构建方式包含3种方式，分别是：
Maven Build：如果当前工程采用 Maven 构建，可以使用 Cloud Toolkit 直接构建并部署。
Gradle Build：如果当前工程采用 Gradle 构建，可以使用 Cloud Toolkit 直接构建并部署。
Upload File：如果当前工程并非采用 Maven 或 Gradle 构建，并且本地已经存在打包好的部署文件，可以选择并直接上传本地的部署文件。
Target Host：选择要部署的目标服务器。
Target Directory ：输入在服务器上的部署路径，如 /root/tomcat/webapps。
After Deploy：输入应用启动命令，如 sh /root/restart.sh。表示在完成应用包的部署后，需要执行的命令 —— 对于 Java 程序而言，通常是一句 Tomcat 的启动命令。
往期推荐
扫一扫，关注我
一起学习，一起进步